<%--
  Created by IntelliJ IDEA.
  User: Win10
  Date: 2023/5/8
  Time: 23:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>观影信息可视化系统-电影收视数据</title>
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/all.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100" style="font-size: medium;">
<header class="main-navbar navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
    <div class="container">
        <a class="navbar-brand" href="">观影信息可视化系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/queryFilmDatas">电影收视数据</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       href="${pageContext.request.contextPath}/queryGenderDatas">不同性别观影偏好</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/queryAgeDatas">各年龄段观影偏好</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/toDataScreen">用户数据大屏</a>
                </li>
            </ul>
            <span class="navbar-text">
              <span class="badge badge-pill badge-secondary">企业用户</span>
                ${ADMIN_SESSION.name}
                <a href="${pageContext.request.contextPath}/logout">退出</a>
            </span>
        </div>
    </div>
</header>

<main role="main" class="flex-shrink-0 content-wrapper main_height">
    <div class="container" style="height: 110%;">
        <div class="form_position">
            <br>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active" aria-current="page">电影收视数据</li>
                </ol>
            </nav>
            <form>
                <br>
                <label for="film_type">电影类型：</label>
                <select class="form-control" id="film_type">
                    <option>当前类型为：${film_type}</option>
                    <option>爱情</option>
                    <option>动画</option>
                    <option>动作</option>
                    <option>纪录</option>
                    <option>家庭</option>
                    <option>剧情</option>
                    <option>科幻</option>
                    <option>奇幻</option>
                    <option>喜剧</option>
                    <option>悬疑</option>
                    <option>语言</option>
                </select>
                <br>
                <div class="form-group">
                    <label for="year">查询年份：</label>
                    <input type="text" class="form-control" id="year" placeholder="请输入查询年份"
                           value="${year}">
                </div>
                <br>
                <button type="button" class="btn btn-primary btn_up" style="width: 100%;" onclick="queryData()">查询</button>
            </form>
        </div>
        <div class="echarts_postion" id="main">
        </div>
    </div>
</main>

<footer class="bg-dark mt-auto py-3">
    <div class="container text-center">
          <span class="text-light small">学校：**** | 学院：**** | 班级：**** |
            学生：**** | 项目类型：****</span>
    </div>
</footer>
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/jquery/echarts.min.js"></script>
<script>
    function queryData(){
        window.location.href = "/queryFilmDatas?film_type=" + $("#film_type").val() +
            "&year=" + $("#year").val();
    }
</script>
<script>
    var sumwatchArray = [<c:forEach items="${watchlogs}" var="watchlog">${watchlog.sumwatch},
        </c:forEach>];
    var maxWatch = Math.max(...sumwatchArray);
    var sumdurationArray = [<c:forEach items="${watchlogs}" var="watchlog">
        <fmt:formatNumber type="number" value="${watchlog.sumduration/3600}"
        maxFractionDigits="2"/>,
        </c:forEach>];
    var maxDuration= Math.max(...sumdurationArray);
    var maxTop = Math.ceil(maxDuration / (maxWatch+2)) * (maxWatch+2);
    var Interval = maxTop / (maxWatch+2);

    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#000'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['收视次数', '收视时长']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '收视时长',
                min: 0,
                max: maxTop,
                interval: Interval,
                axisLabel: {
                    formatter: '{value} h'
                }
            },
            {
                type: 'value',
                name: '收视次数',
                min: 0,
                max: maxWatch + 2,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 次'
                }
            }
        ],
        series: [
            {
                name: '收视时长',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' h';
                    }
                },
                data: [
                    <c:forEach items="${watchlogs}" var="watchlog">
                    ['${watchlog.month}月',
                        <fmt:formatNumber type="number" value="${watchlog.sumduration/3600}"
                        maxFractionDigits="2"/>],
                    </c:forEach>
                ]
            },
            {
                name: '收视次数',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 次';
                    }
                },
                data: [
                    <c:forEach items="${watchlogs}" var="watchlog">
                    ['${watchlog.month}月', ${watchlog.sumwatch}],
                    </c:forEach>
                ]
            }
        ]
    };
    option && myChart.setOption(option);
</script>
</body>
</html>
